const CheckBox = {
    template:`<div class="checkBox" :index="id" @click="send">
                <div class="box">
                    <span :style="{background:color}"></span>
                    <span :style="{background:color}"></span>
                </div>
                {{title}}
            </div>`,
    data(){
        return {
            flag:null
        }
    },
    watch:{
        checked:{
            handler(n){
                this.flag = n;
            },
            immediate: true
        }
    },
    props:{
        checked:{
            type: Boolean,
            default: false
        },
        id:{},
        title:{}
    },
    computed: {
        color(){
            return this.flag ? "red" : "#ccc";
        }
    },
    emits:["change"],
    methods:{
        send(eve){
            this.flag = !this.flag;
            this.$emit("change", this.id, this.flag, eve);
        }
    },
    unmounted(){
        console.log("checkbox组件被卸载")
    },
    mounted(){
        console.log("checkbox组件被挂载")
    },
    activated(){
        console.log("checkbox从缓存中插入组件")
    },
    deactivated(){
        console.log("checkbox移除组件，移入缓存")
    }

}